<template>
  <div>
    <Me></Me>
    <div class="MeContent">
      <div class="beforeContent">
        <img :src="this.Img" alt="">
        <router-link to="/sign" class="login">{{names}}</router-link>
        <span @click="gotoHomePage">个人主页></span>
      </div>
      <div class="Contents">
        <div class="item">
          <span class="cryin">{{this.Numbers}}</span>
          <span>创作中心</span>
        </div>
        <div class="item">
          <span class="cryin">7</span>
          <span>关注</span>
        </div>
        <div class="item">
          <span class="cryin">1</span>
          <span>收藏夹</span>
        </div>
        <div class="item">
          <span class="cryin">15</span>
          <span>最近浏览</span>
        </div>
      </div>
    </div>
    <Card></Card>
  </div>
</template>

<script>
import Me from "@/components/me/Me";
// import MeContent from "@/components/me/MeContent";
import Card from "@/components/me/Card";
import axios from 'axios'
export default {
  data(){
    return{
      names:'未登陆',
      Img:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2395693894,1549853405&fm=26&gp=0.jpg',
      Defaults:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2395693894,1549853405&fm=26&gp=0.jpg',
      Numbers: {},
    }
  },
  components:{
    Me,
    // MeContent,
    Card
  },
  methods:{
    gotoHomePage(){
      this.$router.push('/homepage')
    }
  },
  created() {
    let user = sessionStorage.getItem('user')
    this.Numbers=0
    if (user){
      user=JSON.parse(user);
      this.names=user.name||'未登录';
      this.Img=user.userImg||this.Defaults
      axios.post('http://localhost:9999/select',{
        params:{
          author:this.names
        }
      }).then((res)=>{
        this.Numbers= res.data.data[0]['COUNT(*)']
        // console.log(res.data.data[0])
      })
    }
  }
}
</script>

<style scoped>
a {
  text-decoration: none;
  color: #3e3e3e;
}
.router-link-active {
  text-decoration: none;
}
.card{
  border: 1px #ccc solid;
}
.MeContent{
  position: fixed;
  top: 70px;
  width: 100%;
}
.beforeContent{
  height: 110px;
  text-align: center;
  line-height: 110px;
  width: 100%;
}
.beforeContent .login{
  position: relative;
  top: -40px;
  font-weight: bold;

}
.beforeContent span:nth-child(3){
  position: absolute;
  right: 0;
}
.beforeContent img{
  border-radius: 50%;
  height: 100px;
  width: 100px;
  position: absolute;
  left: 0;
}
.beforeContent .login{
  position: absolute;
  left: 100px;
  top: 0px;
}
.Contents {
  opacity:1;
  height: 100px;
  line-height: 50px;
  position: fixed;
  display: flex;
  justify-items: center;
  width: 100%;
}

.Contents .item{
  flex: 1;
  text-align: center;
  font-size: 16px;
  border-right:1px solid #e0e0e0;
}
.Contents .item .cryin{
  font-size: 20px;
  display: block;
  height: 30px;
}
</style>